import React, { useState } from "react";
import { Transfer } from "antd";

export default ({ dataSource, value, onChange }) => {
  const [targetKeys, setTargetKeys] = useState(value);
  const [selectedKeys, setSelectedKeys] = useState([]);
  const onTransferChange = (nextTargetKeys, direction, moveKeys) => {
    setTargetKeys(nextTargetKeys);
    onChange(nextTargetKeys);
  };
  const onSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
    setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
  };

  return (
    <Transfer
      dataSource={dataSource.map((item) => {
        return {
          ...item,
          key: item.id,
        };
      })}
      showSearch
      titles={["未选书籍", "已选书籍"]}
      targetKeys={targetKeys}
      selectedKeys={selectedKeys}
      onChange={onTransferChange}
      onSelectChange={onSelectChange}
      listStyle={{ width: 400, height: 400 }}
      render={(item) => item.title}
    />
  );
};
